import {
  Button,
  Col,
  Form,
  Input,
  message,
  Modal,
  Popconfirm,
  Radio,
  Row,
  Select,
  Table,
  Tabs,
} from 'antd';
import { FormComponentProps } from 'antd/es/form';
import React from 'react';

const R = require('ramda');

const FormItem = Form.Item;

interface CreateFormProps extends FormComponentProps {
  modalVisible: boolean;
  handleAdd: (fieldsValue: { desc: string }) => void;
  handleModalVisible: () => void;
}
const CreateForm: React.FC<CreateFormProps> = props => {
  const { modalVisible, form, handleAdd, handleModalVisible } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };
  const formItemLayout = { labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 14 } } };
  return (
    <Modal
      destroyOnClose
      title="立即申请"
      visible={modalVisible}
      onOk={okHandle}
      width={800}
      onCancel={() => handleModalVisible()}
    >
      <Form>
        <Row>
          <Col span={12}>
            <FormItem {...formItemLayout} label="联系人手机号" hasFeedback>
              {form.getFieldDecorator('mobile', {
                rules: [{ required: true, message: '请输入联系人手机号！' }],
                initialValue: '',
              })(<Input maxLength="15" />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label="联系人邮箱" hasFeedback>
              {form.getFieldDecorator('email', {
                rules: [
                  {
                    required: true,
                    message: '请输入联系人邮箱！',
                  },
                ],
                initialValue: '',
              })(<Input maxLength="30" />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem {...formItemLayout} label="服务类型" hasFeedback>
              {form.getFieldDecorator('serviceType', {
                rules: [{ required: true, message: '请选择服务类型！' }],
                initialValue: '',
              })(
                <Select>
                  <Select.Option value="8">审单(￥300)</Select.Option>
                  <Select.Option value="9">制单(￥500)</Select.Option>
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label="传待审核单证" hasFeedback>
              {form.getFieldDecorator('unapprovalfile', {
                rules: [{ required: true, message: '请选择传待审核单证！' }],
                initialValue: 'xx',
              })(<Input maxLength="300" />)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default Form.create<CreateFormProps>()(CreateForm);
